<template>
	<!-- 会员管理页面-->
	<div class="user_container">
		<div class="user_section">
			<!-- 头部--搜索添加 -->
			<div class="user_header">
				<el-select v-model="searchList.status" placeholder="请选择用户状态">
					<el-option v-for="(item,index) in userStatus" :key="index" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
				<el-select v-model="searchList.level" placeholder="请选择用户会员等级">
					<el-option v-for="(item,index) in userLevel" :key="index" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
				<el-select placeholder="请选择用户性别" v-model="searchList.gender">
					<el-option v-for="(item,index) in userGender" :key="index" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
				<el-input clearable style="width: 200px;" v-model="searchList.id" placeholder="请输入用户Id" />
				<el-input clearable v-model="searchList.nickname" style="width: 200px;" placeholder="请输入昵称" />
				<el-button type="primary" icon="el-icon-search" @click='search()'>查找</el-button>
				<el-button class="add_user" type="primary" icon="el-icon-edit" @click="fixUser('add')">添加用户</el-button>
			</div>
			<!-- 数据 -->
			<el-table :data='userList' size="small" v-loading="loading" element-loading-text="正在查询中。。。" border fit
			 highlight-current-row>
				<el-table-column align="center" label="用户ID" prop="id" sortable width="100px" />
				<el-table-column align="center" label="昵称" prop="nickname" />
				<el-table-column align="center" label="手机号码" prop="phone" />
				<el-table-column align="center" label="性别" prop="gender">
					<template slot-scope="scope">
						<el-tag>{{gender(scope.row.gender)}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column align="center" label="会员等级" prop="level">
					<template slot-scope="scope">
						<el-tag>{{level(scope.row.level)}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column align="center" label="生日" prop="birthday">
					<template slot-scope="scope"></template>
				</el-table-column>
				<el-table-column align="center" label="状态" prop="status">
					<template slot-scope="scope">
						<el-tag>{{ scope.row.status === 0 ? "冻结" : "激活" }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column align="center" label="上次登录时间" prop="gmtLastLogin">
					<template slot-scope="scope">{{ scope.row.gmtLastLogin | formatDate }}</template>
				</el-table-column>
				<el-table-column align="center" label="上次登录IP" prop="lastLoginIp" />
				<el-table-column align="center" label="操作" width="300">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click='setStatus(scope.row)'>{{ scope.row.status === 0 ? "激活" : "冻结" }}</el-button>
						<el-button type="primary" size="mini" @click='fixUser("edit",scope.row)'>编辑</el-button>
						<el-button type="danger" size="mini" @click='delUser(scope.row)'>删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 添加或修改对话框 -->
			<el-dialog :title="title" :visible.sync="addDialog">
				<el-form ref="userForm" :rules="rules" :model="userForm" status-icon label-position="left" label-width="100px"
				 style="width: 400px; margin-left:50px;">
					<el-form-item label="隐藏的用户id" prop="id" hidden>
						<el-input v-model="userForm.id" style="width: 300px;" />
					</el-form-item>
					<el-form-item label="用户昵称" prop="nickname">
						<el-input v-model="userForm.nickname" style="width: 300px;" />
					</el-form-item>
					<el-form-item label="用户手机号" prop="phone">
						<el-input v-model="userForm.phone" style="width: 300px;" />
					</el-form-item>
					<el-form-item label="用户密码" prop="password">
						<el-input v-model="userForm.password" style="width: 300px;" />
					</el-form-item>
					<el-form-item label="用户性别" prop="gender">
						<el-select v-model="userForm.gender" placeholder="请选择">
							<el-option v-for="(item, index) in userGender" :key="index" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item label="用户等级" prop="level">
						<el-select v-model="userForm.level" placeholder="请选择">
							<el-option v-for="(item, index) in userLevel" :key="index" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item label="用户状态" prop="status">
						<el-select v-model="userForm.status" placeholder="请选择">
							<el-option v-for="(item, index) in userStatus" :item="index" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="closeDialog()">取消</el-button>
					<el-button v-if="title === '创建'" type="primary" @click="addUser('userForm')">确定</el-button>
					<el-button v-else type="primary" @click="updateUser('userForm')">确定</el-button>
				</div>
			</el-dialog>
			<!-- 分页 -->
			<el-footer v-if="userList.length>0" class="border-top d-flex align-items-center px-0  bg-white" style="margin-top: 36px;">
				<div style="flex: 1;" class="px-2">
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="searchList.pageNo"
					 :page-sizes="[10, 20, 30, 50, 100]" :page-size="searchList.limit" layout="total, sizes, prev, pager, next, jumper"
					 :total="total">
					</el-pagination>
				</div>
			</el-footer>
		</div>
	</div>
</template>

<script>
	import {
		usermansge,
		createUser,
		updateUser,
		deleteUser,
		setUser
	} from "../api.js"
	export default {
		data() {
			var validatePhone = (rule, value, callback) => {
				let regPhone = /^1[3456789]\d{9}$/
				if (value === '') {
					callback(new Error('手机号不能为空'));
				} else if (!regPhone.test(value)) {
					callback(new Error('请输入正确的手机号'));
				}
				callback();
			};
			// 用户状态
			let userStatus = [{
				name: "冻结",
				id: 0
			}, {
				name: "激活",
				id: 1
			}, {
				name: "全部",
				id: ''
			}];
			// 用户会员等级
			let userLevel = [{
				name: "普通会员",
				id: 0
			}, {
				name: "vip会员",
				id: 1
			}, {
				name: "全部",
				id: ''
			}];
			// 用户性别
			let userGender = [{
				name: "女",
				id: 1
			}, {
				name: "男",
				id: 2
			}, {
				name: "全部",
				id: ''
			}]
			return {
				userStatus,
				userLevel,
				userGender,
				userList: [], //用户list
				loading: true, //加载
				searchList: {
					status: '',
					level: '',
					gender: '',
					pageNo: 1, //页数
					limit: 20, //每页显示的条数
					id: '',
					nickname: ''
				},
				total: 1, //总条数
				userForm: { //表单数据
					id: undefined,
					level: undefined,
					phone: undefined,
					gender: undefined,
					nickname: undefined,
					birthday: undefined,
					status: undefined
				},
				title: '创建',
				addDialog: false,
				rules: {
					nickname: [{
						required: true,
						message: "用户昵称不能为空",
						trigger: "blur"
					}],
					phone: [{
						validator: validatePhone,
						trigger: "blur"
					}],
					gender: [{
						required: true,
						message: "请选择用户性别类型",
						trigger: "blur"
					}],
					level: [{
						required: true,
						message: "请选择用户会员等级状态",
						trigger: "blur"
					}],
					status: [{
						required: true,
						message: "请选择用户状态",
						trigger: "blur"
					}],
					password:  [{
							required: true,
							message: "请输入密码",
							trigger: "blur"
						},
						{
							pattern: /^[0-9a-zA-Z$./]{8}/,
							message: "至少八个数字和字母"
						}
					]
				},
			}
		},
		// 时间过滤
		filters: {
			formatDate: function(value) {
				var date = new Date(value); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var M = date.getMonth() + 1 + '月';
				var D = date.getDate() + '日';
				var h = date.getHours() + '时';
				var m = date.getMinutes() + '分';
				return M + D + h + m;
			}
		},
		methods: {
			// 获取数据
			getData() {
				this.loading = true;
				usermansge(this.searchList).then((res) => {
					// console.log(res)
					this.loading = false;
					this.userList = res.data.data.items;
					this.total = res.data.data.total;
				})
			},
			handleSizeChange(val) { //每页条数
				this.searchList.limit = val
				this.getData();
			},
			handleCurrentChange(val) { //前往第几页
				this.searchList.pageNo = val
				// console.log(val)
				this.getData()
			},
			// 搜索
			search() {
				this.searchList.pageNo = 1;
				this.getData();
			},
			// 筛选性别
			gender(value) {
				if (value === 1) {
					return '女'
				} else if (value === 2) {
					return '男'
				} else {
					return '未知性别'
				}
			},
			// 筛选会员等级
			level(value) {
				if (value === 0) {
					return '普通会员'
				} else if (value === 1) {
					return 'VIP会员'
				} else {
					return '未知等级'
				}
			},
			// 初始化表单
			fixUser(type, value) {
				this.addDialog = true;
				if (type === 'add') {
					this.title = '创建'
					this.userForm = {
						id: undefined,
						level: undefined,
						phone: undefined,
						gender: undefined,
						nickname: undefined,
						birthday: undefined,
						status: undefined
					}
				} else {
					this.title = '编辑'
					this.userForm = Object.assign({}, value);
					console.log(value)
				}
				if (this.$refs.userForm != undefined) {
					this.$refs.userForm.resetFields(); //form表单的dom渲染完在执行this.$refs.userForm.resetFields()，去除验证
				}
			},
			// 添加用户
			addUser(formName) {
				let _this = this
				// console.log(this.$refs[formName])
				this.$refs[formName].validate((valid) => {
					if (valid) {
						createUser(_this.userForm).then((res) => {
							console.log(res)
							if(res.data.errno === 200){
								_this.userList.unshift(res.data.data);
								_this.addDialog = false;
								_this.$message.success(res.data.errmsg);
								_this.searchList.nickname = _this.userForm.nickname;
								_this.getData()
							}else{
								_this.addDialog = false;
								_this.$message.error(res.data.errmsg);
								_this.getData()
							}
							
						})
					} else {
						return false;
					}
				})
			},
			// 编辑
			updateUser(formName) {
				let _this = this
				// console.log(this.$refs[formName])
				this.$refs[formName].validate((valid) => {
					if (valid) {
					updateUser(_this.userForm).then((res)=>{
						// console.log(res)
						if (res.data.errno == 200) {
							_this.addDialog = false;
							this.$message.success("更新用户成功");
							_this.getData()
						} else {
							_this.addDialog = false;
							_this.$message.error(res.data.errmsg);
							_this.getData()
						}
					})
					} else {
						return false;
					}
				})
			},
			// 删除
			delUser(value){
				// console.log(value)
				let _this = this;
				this.$confirm(
						"此操作将永久删除该用户---" + value.nickname + "---, 是否继续?",
						"提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						}
					).then(() => {
						deleteUser(value.id, value.nickname).then((res)=>{
							if (res.data.errno == 200) {
								_this.$message.success("删除成功")
								let index = _this.userList.indexOf(value);
								_this.userList.splice(index, 1);
							}else{
								_this.addDialog = false;
								_this.$message.error(res.data.errmsg)
								_this.getData()
							}
						})
					})
			},
			// 关闭弹出框
			closeDialog() {
				this.addDialog = false;
			},
			// 设置用户状态
			setStatus(value){
				this.userForm.id = value.id;
				this.userForm.status = value.status === 1 ? 0 : 1;
				let _this = this;
				setUser(this.userForm).then((res)=>{
					this.$message.success("状态更改成功!");
					_this.getData();
				})
			}
		},
		created: function() {
			this.getData();
		}
	}
</script>

<style>
	.user_container {
		width: 100%;
		height: 660px;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.user_section {
		padding: 20px;
		background-color: #fff;
		width: 100%;
		height: 100%;
	}

	.user_header {
		padding-bottom: 10px;
	}

	.user_header>* {
		margin-left: 4px;
	}

	.add_user {
		margin-right: 4px !important;
		margin-top: 10px !important;
	}
</style>
